<template>
	<div>
		<!-- 轮播图 -->
		<swiper></swiper>

		<!-- 主体 -->
		<div class="main">
			<div class="cont">
				<div class="con_top">
					<div class="one item">
						<p class="word">查看更多</p>
						<p class="word">精彩乌镇特辑</p>
						<p>
							<a href="javascript:;">
								<img src="http://www.wuzhen.com.cn/resource/web/images/face-shouji.png" alt="">
							</a>
							<a href="javascript:;">
								<img src="http://www.wuzhen.com.cn/resource/web/images/weixin-shouji.png" alt="">
							</a>
							<a href="javascript:;">
								<img src="http://www.wuzhen.com.cn/resource/web/images/weixin-shouji.png" alt="">
							</a>
						</p>
						<p class="more">
							<a href="javascript:;">更多动态</a>
						</p>
					</div>
					<div class="two item">
						<h2>冲着这家“丝绸文化” 主题的艺术范酒店，也要去一趟乌镇 | 乌镇•睡觉</h2>
						<span>2021.11.06</span>
						<p class="more">
							<a href="javascript:;">了解更多</a>
						</p>
					</div>
					<div class="three item">
						<h2>送门票、送餐券、送客房，乌镇的年夜饭福利来啦！绝对够卷！</h2>
						<span>2021.10.31</span>
						<p class="more">
							<a href="javascript:;">了解更多</a>
						</p>
					</div>
					<div class="four item">
						<h2>乌镇早茶客：水上集市一开门，水乡的一天拉开了序幕</h2>
						<span>2021.10.29</span>
						<p class="more">
							<a href="javascript:;">了解更多</a>
						</p>
					</div>
				</div>

				<div class="china_wu">
					<h3>中国乌镇</h3>
					<h4>SINCE 1950</h4>
					<!-- <img src="http://www.wuzhen.com.cn/uploads/summary/2017102515324390655.jpg" alt=""> -->
					<swiper2></swiper2>
					<p>乌镇地处桐乡市北端，京杭大运河西侧，西临湖州市，北界江苏吴江县，为两省三市交界之处。作为首批中国历史文化名镇、中国十大魅力名镇、全国环境优美乡镇、国家5A级景区，乌镇素有“中国最后的枕水人家”之誉。</p>
					<span><a href="">了解更多</a></span>
				</div>

				<div class="charm_wu clearfix">
					<h3>魅力乌镇</h3>
					<div class="list">
						<div class="item lf" v-for="(item,index) in list" :key="index">
							<div class="pic" @mouseenter="flag=true" @mouseleave="flag=false">
								<a href="javascript:;">
									<img :src="item.addres" alt="">
									<transition name="fade" v-if="flag">
										<div class="option">
											<p>{{item.one}}</p>
											<p>{{item.two}}</p>
											<p>{{item.three}}</p>
											<p>{{item.four}}</p>
											<p>{{item.five}}</p>
										</div>
									</transition>
								</a>
							</div>
							<h5>{{item.title}}</h5>
							<p class="word">{{item.content}}</p>
							<p class="more">{{item.more}}</p>
						</div>
					</div>
				</div>

				<div class="travel">
					<h3>出行锦囊</h3>
					<div class="tra_con">
						<a href="javascript:;" class="item" v-for="item in travel" :key="item">
							<img :src="item.pic" alt="">
							<p>{{item.title}}</p>
						</a>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
	import swiper from '../components/swiper.vue'
	import swiper2 from '../components/swiper2.vue'
	export default {
		data() {
			return {
				share: [
					// require('../asstes/imgs/wb.png'),
					// require('../asstes/imgs/wx.png'),
					// require('../asstes/imgs/f.png')
				],
				list: [{
						addres: "http://www.wuzhen.com.cn/uploads/day/2019022810292346940.jpg",
						title: "度假",
						content: "江南水乡，枕水人家。在乌镇享受精神和身体的完全放松",
						more: "了解更多",
						one: "住宿",
						two: "美食",
						three: "休闲娱乐",
						four: "乌村",
						five: "伴手礼"
					},
					{
						addres: "http://www.wuzhen.com.cn/uploads/day/2019022810303729804.jpg",
						title: "文化",
						content: "传统碰撞现代，在乌镇感受中国古老文化的非凡魅力和现代东方生活的融合",
						more: "了解更多",
						one: "文化活动",
						two: "乌镇国际当代艺术邀请展",
						three: "乌镇国际未来视觉艺术计划",
						four: "木心美术馆",
						five: "乌镇戏剧节"
					},
					{
						addres: "	http://www.wuzhen.com.cn/uploads/day/2019022810281329353.jpg",
						title: "会展",
						content: "乌镇以专业、高效、谨慎的精神策划每一场活动让每一次盛典都成为人生独一无二的美好经历",
						more: "了解更多",
						one: "场地介绍",
						two: "服务介绍",
						three: "乌镇互联网国际会展中心",
						four: "成功案例",
						five: ""
					}
				],
				travel: [{
						pic: 'http://www.wuzhen.com.cn/resource/web/images/youji-1.png',
						title: '游记攻略'
					},
					{
						pic: 'http://www.wuzhen.com.cn/resource/web/images/piaowu-1.png',
						title: '票务信息'
					},
					{
						pic: 'http://www.wuzhen.com.cn/resource/web/images/dianhua-1.png',
						title: '常用电话'
					},
					{
						pic: 'http://www.wuzhen.com.cn/resource/web/images/luxian-1.png',
						title: '景区交通'
					},
					{
						pic: 'http://www.wuzhen.com.cn/resource/web/images/jiaotong-1.png',
						title: '周边交通'
					}
				],
				flag: true,
			}
		},
		components: {
			swiper,
			swiper2
		},
	}
</script>
<style scoped="scoped">
	.lf {
		float: left;
	}

	.rg {
		float: right;
	}

	.main {
		margin-top: 100px;
	}

	.main .cont {
		padding: 0 200px;
		/* text-align: center; */
	}

	.main .cont .con_top {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #D5DAE1;
		padding-bottom: 80px;
	}

	.main .con_top .item {
		display: inline-block;
		width: 265px;
		/* margin-left: 120px; */
	}

	.main .con_top .item p {
		font-size: 20px;
		margin-top: 10px;
	}

	.main .con_top .item p a {
		font-size: 12px;
		color: #000;
	}

	.main .one img {
		width: 25px;
		margin-top: 10px;
		margin-right: 10px;
	}

	.main .con_top .item span {
		display: inline-block;
		margin-top: 20px;
	}

	.main .con_top .item .more {
		width: 48px;
		border-bottom: #000000 solid 1px;

	}


	.main .cont .china_wu,
	.main .cont .charm_wu {
		margin-top: 80px;
		text-align: center;
	}

	.main .cont .china_wu h3,
	.main .cont .charm_wu h3 {
		font-size: 60px;
		/* text-align: center; */
	}

	.main .cont .china_wu h4 {
		font-size: 30px;
		/* text-align: center; */
		color: #666;
		padding-bottom: 50px;
	}

	.main .cont .china_wu p {
		padding: 50px 200px;
		color: #666;
		line-height: 30px;
		font-size: 18px;
	}

	.main .cont .china_wu span {
		display: inline-block;
		border-bottom: 1px solid #000000;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}

	.main .cont .china_wu img {
		max-width: 100%;
		vertical-align: middle
	}

	.main .cont .china_wu span a {
		color: #111;
	}

	.main .cont .charm_wu .list {
		display: flex;
		justify-content: space-between;
	}

	.main .cont .charm_wu .item {
		width: 434px;
		padding: 80px 30px;
		text-align: center;
		margin-left: 5px;
	}

	.main .cont .charm_wu .item .pic {
		width: 434px;
		height: 612px;
	}

	.main .cont .charm_wu .item .pic a {
		display: block;
		position: relative;
		color: #FFFFFF;
	}

	.main .cont .charm_wu .item .option {
		width: 434px;
		height: 612px;
		position: absolute;
		top: 0;
		background-color: rgba(0, 0, 0, .3);
	}

	.main .cont .charm_wu .item .option p:first-child {
		margin-top: 200px;
	}

	.main .cont .charm_wu .item .option p {
		line-height: 50px;
		font-size: 20px;
	}

	.main .cont .charm_wu .item .option p:hover {
		color: #FF0000;
	}

	.fade-enter-active {
		transition: all ease 1s;
	}

	/* 进入开始状态 */
	.fade-enter {
		opacity: 0;
		/* transform: rotate(-180deg); */
	}

	/* 进入结束状态 */
	.fade-enter-to {
		opacity: 1;
		/* transform: rotate(0deg); */
	}

	/* 离开类 */
	.fade-leave-active {
		transition: all ease 1s;
	}

	/* 离开开始 */
	.fade-leave {
		opacity: 1;
		/* transform: rotate(-180deg); */
	}

	/* 离开结束 */
	.fade-leave-to {
		opacity: 0;
		/* transform: rotate(0deg); */
	}

	.main .cont .charm_wu .item img {
		width: 434px;
		height: 612px;
		overflow: hidden;
	}

	.main .cont .charm_wu .item h5 {
		font-size: 30px;
		margin-top: 40px;
	}

	/* .main .cont .charm_wu .item:first-child .more{
		padding-top: 21px;
	} */
	.main .cont .charm_wu .word {
		font-size: 18px;
		padding: 20px 5px;
		color: #666;
		line-height: 32px;
	}

	.main .cont .charm_wu .more {
		width: 60px;
		margin: 0 auto;
		padding-bottom: 8px;
		border-bottom: 1px solid #111;
		font-size: 14px;
	}

	.travel {
		margin: 50px 0;
	}

	.travel h3 {
		font-size: 60px;
		text-align: center;
	}

	.travel .tra_con {
		display: flex;
		justify-content: space-between;
		padding: 60px 200px;
	}

	.travel .tra_con .item {
		display: block;
		text-align: center;
	}

	.travel .tra_con .item p {
		font-size: 18px;
		color: #3E3E3E;
		letter-spacing: 0.8px;
		line-height: 32px;
	}
</style>
